import React, { Component } from 'react'
import { View, TouchableOpacity, Image, Text, StyleSheet, Platform, DeviceEventEmitter} from 'react-native' 
import ViewUtils from '../src/Utils/ViewUtils';
import GlobalStyles from '../src/styles/GlobalStyle'
import { connect } from 'react-redux'


class ReadHeader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      item: this.props.navigation.getParam('show', {})
    }
  }
  like(item) {
    let obj = {...this.state.item}
    obj.show = !obj.show
    this.setState({
      item: obj
    })
    DeviceEventEmitter.emit('collect', item);
  }
  callback() {
    this.props.navigation.pop();
  }
  render() {
    let title = this.props.navigation.getParam('name', '');
    let backButtom = ViewUtils.getLeftButton(()=> this.callback())

    return (
      <View style={{
        backgroundColor: this.props.themeColor,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: (Platform.OS === 'ios') ? GlobalStyles.nav_bar_height_ios : GlobalStyles.nav_bar_height_android,
     }}>
        {
          backButtom
        }
        <Text style={{fontSize: 14, color: '#fff'}}>{title}</Text>
        <TouchableOpacity onPress={()=> this.like(this.state.item)} style={styles.imgContainer}>
          <Image style={styles.img} source={
            this.state.item.show ? require('../src/images/ic_star.png') : require('../src/images/ic_unstar_transparent.png')
          } tintColor="#fff"/>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  img: {
    width: 20,
    height: 20,
    marginRight: 10,
  }
})

export default connect((state)=> ({themeColor: state.theme.themeColor}), null)(ReadHeader)